<template>
  <div>
    <button @click="jump">跳转到home</button>
    <button @click="jumpP">param跳转到home</button>
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    jump() {
      // $router 全局的路由实例 里面有很多方法
      console.log(this.$router)
      // 路由跳转传参
      // 1.通过query传参 将参数拼接到url后面 需要通过path去跳转 刷新数据不会丢失
      this.$router.push({
        // path:路由配置的路径
        path: '/',
        query: {
          userName: '张三',
          age: 18
        }
      })
    },
    jumpP() {
      // 通过params传参 不会将参数拼接到url后面 但是刷新数据就丢失 通过name跳转
      this.$router.push({
        // 路由文件中的home
        name: 'home',
        params: {
          passsword: '123456',
          admin: '李唯一'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>